<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<vInput></vInput>
		<!-- #endif -->
		<!-- 顶部滑块 -->
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="'top'+scrollIntoIndex">
			<view :id="'top'+index" class="scroll-item" v-for="(item,index) in topBar" :key="index">
				<text :class="topBarIndex===index?'f-active-color':'f-color'"
					@click="changeActive(index)">{{item.name}}</text>
			</view>
		</scroll-view>

		<swiper :current="topBarIndex" @change="changeSwiper" :style="'height:'+clentHeight+'px;'">
			<swiper-item v-for="(item,index) in newTopBar" :key='index'>

				<scroll-view @scrolltolower="loadMore(index)" scroll-y="true" :style="'height:'+clentHeight+'px;'">
					<block v-if='item.data.length>0'>
						<block v-for="(k,i) in item.data" :key="i">

							<IndexSwiper v-if="k.type==='swiperList'" :swiperList="k.data"></IndexSwiper>

							<template v-if="k.type==='recommendList'">
								<Recommend :recommendDataList="k.data"></Recommend>
								<Card cardTitle="猜你喜欢"></Card>
							</template>

							<Banner v-if="k.type==='bannerList'" :bannerImgUrl='k.imgUrl'></Banner>

							<template v-if="k.type==='iconsList'">
								<Icons :iconsList='k.data'></Icons>
								<Card cardTitle="热爆商品"></Card>
							</template>

							<template v-if="k.type==='hotList'">
								<Hot :hotList='k.data'></Hot>
								<Card cardTitle="推荐店铺"></Card>
							</template>

							<template v-if="k.type==='shopList'">
								<Shop :shopList='k.data'></Shop>
								<Card cardTitle="为您推荐"></Card>
							</template>

							<CommondityList v-if="k.type==='commodityList'" :commodityDataList='k.data'>
							</CommondityList>

						</block>
					</block>
					<view v-else>
						暂无数据...
					</view>
					<view class="load-text f-color">
						{{item.loadText}}
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<Tabbar currentPage='index'></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '../../components/common/Tabbar.vue'
	import $http from '@/common/api/request.js'
	import IndexSwiper from '@/components/index/indexSwiper.vue'
	import Recommend from '@/components/index/Recommend.vue'
	import Card from '@/components/common/Card.vue'
	import CommondityList from '@/components/common/CommondityList.vue'
	import Banner from '@/components/index/Banner.vue'
	import Icons from '@/components/index/Icons.vue'
	import Hot from '@/components/index/Hot.vue'
	import Shop from '@/components/index/Shop.vue'
	import vInput from '../../components/common/input.vue'
	export default {
		data() {
			return {
				// 选中的索引
				topBarIndex: 0,
				// 内容块的高度值
				clentHeight: 0,
				// 顶栏数据
				topBar: [],
				// 承载数据的
				newTopBar: [],
				// 首页页码数
				indexPage:1,
			}
		},
		computed: {
			// 
			scrollIntoIndex() {
				if (this.topBarIndex == 0) {
					return 0
				} else {
					return this.topBarIndex - 1
				}
			}
		},
		components: {
			IndexSwiper,
			Recommend,
			Card,
			CommondityList,
			Banner,
			Icons,
			Hot,
			Shop,
			Tabbar,
			vInput
		},
		onLoad() {
			this.init()
		},
		onReady() {

			uni.getSystemInfo({
				success: (res) => {
					// console.log(res)
					this.clentHeight = res.windowHeight - this.getClentHeight()
					//this.clentHeight = res.windowHeight - uni.upx2px(80) - this.getClentHeight()
				}
			})
		},
		// 标题栏按钮点击
		onNavigationBarButtonTap(e){
			if(e.float='left'){
				uni.navigateTo({
					url:'../search/search'
				})
			}
		},
		methods: {
			// 头部滑块切换的方法
			changeActive(index) {
				this.indexPage=1
				if (this.topBarIndex == index) {
					return
				}
				this.topBarIndex = index
				if (this.newTopBar[this.topBarIndex].load === 'first') {
					this.addData()
				}
			},
			changeSwiper(e) {
				this.topBarIndex = e.detail.current
				this.addData()
			},
			// 初始化获取数据的方法
			init() {
				$http.request({
					url: '/index_list/data',
				}).then((res) => {
					this.topBar = res.topBar;
					this.newTopBar = this.initData(res);
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			// 加载不同的数据
			initData(res) {
				let arr = [];
				for (let i = 0; i < this.topBar.length; i++) {
					let obj = {
						data: [],
						load: 'first',
						loadText: '下拉加载更多'

					}
					// 获取首次的数据
					if (i == 0) {
						obj.data = res.data;
					}
					arr.push(obj)
				}
				return arr;
			},
			// 兼容可使区域高度
			getClentHeight() {
				const res = uni.getSystemInfoSync();
				// console.log(res.platform,res.statusBarHeight)
				const system = res.platform
				if (system === 'ios') {
					return 40 + res.statusBarHeight
				} else if (system === 'android') {
					return 48 + res.statusBarHeight
				} else {
					return 0
				}
			},
			// 对应显示不同数据
			addData(callback) {
				// 拿到索引
				let index = this.topBarIndex;
				// 拿到id
				let id = this.topBar[index].id;
				$http.request({
					url: '/index_list/' + id + '/data',
					method:"POST",
					header:{
						'content-type': 'application/x-www-form-urlencoded',
					},
					data:{
						id,
						page:this.indexPage
					}
				}).then((res) => {
					this.newTopBar[index].data = [...res]
					uni.hideLoading()
				}).catch(() => {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
				this.newTopBar[index].load = 'last'
				if (typeof callback === 'function') {
					callback()
				}
			},
			//上拉加载更多的方法
			loadMore(index) {
				if(index!=0){
					this.indexPage+=1
					this.newTopBar[index].loadText = '加载中...'
					// 请求完数据，文字提示变成上拉加载更多
					this.addData(() => {
						this.newTopBar[index].loadText = '上拉加载更多...'
					})
				}
				
			}
		}
	}
</script>

<style scoped>
	.content{
		/* margin-bottom: 160rpx; */
		padding-bottom: 100rpx;
	}
	.scroll-content {
		width: 100%;
		height: 100rpx;
		white-space: nowrap;


	}

	.scroll-item {
		display: inline-block;
		padding: 10rpx 30rpx;
		font-size: 36rpx;
	}

	.f-active-color {
		padding-bottom: 10rpx;
		border-bottom: 4rpx solid #49BDFB;
	}

	.load-text {
		border-top: 2rpx solid #636263;
		text-align: center;
		line-height: 60rpx;
	}
</style>
